<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定宽度布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: 1px solid;
        }

        nav {
            width: 150px;
            float: left;
            background-color: antiquewhite;
        }

        nav li {
            list-style-type: none;
        }

        nav .inner {
            padding: 5px;
        }

        article {
            width: 600px;
            float: left;
            background-color: #ffed53;
        }

        article .inner {
            padding: 20px;
            margin: 10px;
        }

        aside .inner {
            padding: 5px;
        }

        aside {
            width: 210px;
            background-color: #3f7ccf;
            float: left;
        }

        header {
            background-color: #f00;
        }

        footer {
            background-color: antiquewhite;
            clear: both;
            text-align: center
        }
    </style>
</head>
<body>
<div id="wrapper">
    <header>
        this is header
    </header>
    <nav>
        <div class="inner">
            <li>nav1</li>
            <li>nav2</li>
        </div>
    </nav>
    <article>
        <div class="inner">
            <p> 我们需要更精细地控制布局宽度，以便随着浏览器窗口宽度的合理变
                化，布局能够作出适当的调整，确保文本行不会过长或过短。如果随意给元素添加
                内边距、边框，或者元素本身过大，导致浮动元素的宽度超过包含元素的布局宽度，
                那浮动元素就可能“躲”到其他元素下方。
            </p>

            <p> 当然啦，即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这
                些内容元素自动扩展到填满栏的宽度。本书前面已经讲过了，这是块级元素的默认
                行为。简言之，就是让栏宽限制其中内容元素的宽度。
                以上这些细节在实际地创建布局时会更容易明白。眼下，只要知道应该控制布局宽
                度，而让内容决定布局高度这个一般原则就好了。
            </p>
        </div>
    </article>
    <aside>
        <div class="inner">
            aside
        </div>
    </aside>
    <footer>
        this is footer
    </footer>
</div>
</body>
</html>